2 slides on one page
\n\n ![](\"/e21e379e1a98d5eaeb70a35552de4ac7/slick3.gif\")
\n
\n\n3 slides on one page
\n\n ![](\"/56b6da661729113cc928793d4c4fdfc6/slick2.gif\")
\n
\n\n이번에 반응형으로 slick(carousel)을 구현하며 겪은 문제가 있다.\n브라우저의 크기가 변경되면 slick이 한 화면에 보여주는 슬라이드의 수가 유동적으로 변하게 되는데,\nslick은 마지막 페이지에 도달하면 다음 페이지로 이동하지 못하게 막아야하므로\n다음 처럼 총 6개의 슬라이드가 있다고 가정한다면\n2개의 슬라이드씩 넘어갈 때는 3번을 넘길 수 있지만, 3개의 슬라이드가 넘어갈 때는 2번만 넘어가도록 만들어야 했다.
\n예시
\n2 slides on one page
\n\n3 slides on one page
\n\n본인은 screen.window.availWidth를 사용해 구현했고 availWidth를 사용했을 때 아래와 같이 문제가 있었다.
\n![](\"/ea0550289da1009d64f69ecfae9598ff/pageProblem1.gif\")
\n![](\"/bbb6fc96fc7284c2f9daee117fa1c735/pageProblem2.gif\")
\n왜 이 같은 문제가 발생하는지 찾아보았고 그 해답은 web api의 특성에 있었다.
\nwindow.screen.width는 모니터의 해상도이다. 따라서 노트북, 모바일 등 해상도가 다른 디바이스마다 값이 다르다.
\n하지만 같은 디바이스에서는 죽었다 깨어나도 값이 바뀔일이 없다.
\n본인이 햇갈렸던 api다. api 이름으로만 보면 브라우저의 크기에 따라 그 값이 변동되는 것처럼 느껴지지만 실상은 그렇지 않다.
\nwindow.screen.width와 성질은 같다. 역시나 모니터 해상도에 따라 값이 정해지며, 다만 상단의 툴바와 같은 영역을 제외하고 screen size가 결정된다. 주의할 점은 브라우저의 크기를 줄여도 무조건 모니터의 해상도가 기준이 되어 툴바 영역을 배제한다는 점이다.
\nconsole.log(\n 'availHeight: ',\n window.screen.availHeight,\n 'height: ',\n window.screen.height\n); // availHeight: 1050 height: 1080innerWidth는 브라우저 윈도우 창틀(외부 영역)을 제외한 크기를 표시한다. 반대로 window.outerWidth는 창틀까지 포함한 영역을 크기다.
\n디바이스의 크기가 아니라 브라우저의 크기에 따라 slide의 개수가 정해지기 때문에, window.innerWidth를 사용해야 한다.
\nReact에서 커스텀 훅에 window.innerWidth를 사용해 봤다.\nresize 이벤트는 window의 크기가 변할 때 트리거 된다. resize 이벤트와 window.innerWidth를 함께 사용하면 문제를 해결할 수 있다.
\nimport { useEffect, useState } from 'react';\n\nexport default function useWindowWidth() {\n const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n\n useEffect(() => {\n window.addEventListener('resize', () => {\n setWindowWidth(window.innerWidth);\n });\n }, [windowWidth]);\n\n return windowWidth;\n}